import {Button, Divider, Radio, Upload} from "antd";
import React, {FC, useCallback, useEffect, useMemo, useRef, useState} from "react";
import {useTranslation} from "react-i18next";
import GlobalIcon from "../../../global/GlobalIcon.tsx";
import {addOkModal, closeModal} from "../../../services/ModalService.tsx";
import {uploadIconFile} from "../../../services/FileService.tsx";
import useStateRef from "../../../customUse/useStateRef.tsx";
import useThrottle from "../../../customUse/useThrottle.tsx";
import "../css/SelectIconModal.less";

const iconMap: any = {
    temporaryIcon: [
        "icon-choucha",
        "icon-chouchajiancha",
        "icon-mobanguanli",
        "icon-zhihangrenwu",
        "icon-zuzhijiagou",
        "icon-renwugenzong",
        "icon-zuzhijiagou1",
        "icon-mobanguanli2",
        "icon-xitongjiankong",
        "icon-jianduchoucha",
        "icon-ICON-",
        "icon-icon",
        "icon-icon_zuzhijiagou_moren",
        "icon-dangzuzhijiagouyilanbiaoicon",
        "icon-yunweirenwugenzongrenwu",
        "icon-mobanguanli3",
        "icon-renwugenzong1",
        "icon-qiyezuzhijiagouguanli",
        "icon-caidanguanli",
        "icon-moxing",
        "icon-xitongjiankong1",
        "icon-shouquanzhongxin",
        "icon-a-013_zuzhijiagou",
        "icon-shoujianzhihangrenwu",
        "icon-jiancharenwuxiafa",
        "icon-chouchazhikong",
        "icon-a-010_zuzhijiagou",
        "icon-a-yewuguanli2",
        "icon-yewuguanli-mianxing",
        "icon-shouxinhourenwugenzong",
        "icon-xitongguanli-caidanguanli2",
        "icon-yewuguanli-nor",
        "icon-yewuguanlipeizhi",
        "icon-chanpinku",
        "icon-icon-test",
        "icon-banli",
        "icon-daibanshijian",
        "icon-wendangguanli1",
        "icon-sc-",
        "icon-tongzhiguanli",
        "icon-wendangguanli2",
        "icon-erjibihuan",
        "icon-wendangguanli3",
        "icon-yiban1",
        "icon-renlishenheguanli",
        "icon-yiqianshou-",
        "icon-xitongguanli1",
        "icon-OAtubiao_xitongguanliyuan",
        "icon-tongzhiguanli1",
        "icon-wenjianwaifa",
        "icon-woyishenpi",
        "icon-chanpin",
        "icon-daishenpi",
        "icon-yishenpi",
        "icon-wodeshoucangjia",
        "icon-zhanghaojiaoyi",
        "icon-bihuan",
        "icon-10-wodeyiban",
        "icon-xianxingshoucangjia",
        "icon-peizhi",
        "icon-fafang",
        "icon-shenpidaishenpi",
        "icon-shenheguanli2",
        "icon-f_wait",
        "icon-bihuanshijian",
        "icon-xitongpeizhixuanzhong",
        "icon-nantongdangjiancaidan_tongzhiguanli",
        "icon-bihuanshuai",
        "icon-qiyewendangku",
        "icon-bihuan1",
        "icon-EC_wendang-IThulianwang",
        "icon-daiban",
        "icon-shoucangjia",
        "icon-yw_flat_tongzhiguanli-01",
        "icon-shoucangjia1",
        "icon-wendangguanli4",
        "icon-fafang1",
        "icon-daishenpi1",
        "icon-tongzhiguanli2",
        "icon-shenpidaiban",
        "icon-icon-chakanbihuan",
        "icon-waifaguanli-fabudaopingtai-fabuxiangqing-duiyingxuqiu",
        "icon-tongzhiguanli3",
        "icon-tongzhiguanli4",
        "icon-a-zu697",
        "icon-peizhi-xitongpeizhi",
        "icon-peizhiweihu2",
        "icon-daiqianshou1",
        "icon-kafafangguanli",
        "icon-bihuanguanli",
        "icon-xitongpeizhi1",
        "icon-wendangguanli5",
        "icon-bihuan11",
        "icon-a-010_yunwendang",
        "icon-waifashenqing",
        "icon-tongzhiguanli5",
        "icon-fafang2",
        "icon-zhinengbihuan",
        "icon-shoucangjia2",
        "icon-a-027_wendang",
        "icon-baiwangyun-wendangm",
        "icon-tongzhiguanli_quanjuguanli",
        "icon-a-shezhipeizhicanshu",
        "icon-a-shezhipeizhi",
        "icon-tongzhiguanli6",
        "icon-chanpinku1",
        "icon-peizhi-xitongpeizhi1",
        "icon-peizhi-xitongpeizhi2",
        "icon-document-y",
        "icon-document-picutre",
        "icon-anquanwaifa",
        "icon-wendangguanli-copy",
        "icon-gaojingtongzhiguanli",
        "icon-peizhi-yunweipeizhi",
        "icon-a-weiwaifaliaotuiliaomingxibiao",
        "icon-waifaguanli",
        "icon-bihuanshuai1",
        "icon-iconwaifa",
        "icon-icon_wendangziliaopeizhi",
        "icon-xitongpeizhi",
        "icon-wendang",
        "icon-daiqianshou",
        "icon-wendang1",
        "icon-tongzhi",
        "icon-tongzhi1",
        "icon-wodebanli",
        "icon-shenheguanli",
        "icon-shenheguanli1"
    ],
    systemIcon: [
        "icon-folder",
        "icon-picture",
        "icon-video",
        "icon-txt",
        "icon-word",
        "icon-ppt",
        "icon-pdf",
        "icon-excel",
        "icon-drawing",
        "icon-zip",
        "icon-file-unknown",
        "icon-three-dimensional",
        "icon-spare-parts",
        "icon-fasteners",
        "icon-number",
        "icon-text",
        "icon-post",
        "icon-structure",
        "icon-group",
        "icon-user",
        "icon-outbox",
        "icon-inbox",
        "icon-warehouse",
        "icon-monitor"
    ],
    btnIcon: [
        "icon-setting",
        "icon-create",
        "icon-edit",
        "icon-revise",
        "icon-copy",
        "icon-paste",
        "icon-delete",
        "icon-save",
        "icon-save-as",
        "icon-import",
        "icon-export",
        "icon-add",
        "icon-close",
        "icon-close-page",
        "icon-upload",
        "icon-download",
        "icon-active",
        "icon-unActive",
        "icon-share",
        "icon-shear",
        "icon-close-all",
        "icon-assign",
        "icon-approval",
        "icon-refuse",
        "icon-add-user",
        "icon-remove-user",
        "icon-add-group",
        "icon-remove-group",
        "icon-transfer",
        "icon-return",
        "icon-move",
        "icon-authorize",
        "icon-deploy",
        "icon-left-move",
        "icon-right-move",
        "icon-launch",
        "icon-put-away",
        "icon-collection",
        "icon-collectioned",
        "icon-check-in",
        "icon-check-out",
        "icon-screen",
        "icon-refresh",
        "icon-flow",
        "icon-send",
        "icon-comment",
        "icon-attachment",
        "icon-pk",
        "icon-click",
        "icon-fixed",
        "icon-left-split-right",
        "icon-print"
    ]
};

interface SelectIconModalProps {
    modalKey: string
}

const SelectIconModal: FC<SelectIconModalProps> = (props) => {
    const {t} = useTranslation();

    const customIconsRef = useRef([]);

    const [value, setValue] = useState<string>(props.value || ""),
        [customIcons, setCustomIcons] = useStateRef([], customIconsRef);

    const onOk: Function = useThrottle(async () => {
        await closeModal(props.modalKey, () => {
            return {data: value}
        })
    }, 2000, [value]);

    const loadIconList = useCallback(async () => {
        // const {data = []}: { data: any[] } = await AxiosGet("/sf-drs/platform/icon/id");
        // setCustomIcons(data);
    }, []);

    const handleUploadIcon: Function = useCallback(async (file: any) => {
        const res = await uploadIconFile(file);
        setCustomIcons([res.id, ...customIconsRef.current]);
        setValue(res.id)
    }, []);

    useEffect(() => {
        loadIconList();
    }, []);

    useEffect(() => {
        addOkModal(props.modalKey, onOk)
    }, [value]);

    const renderCustomIcon = useMemo(() => {
        return (<div>
            <Divider plain>{t("customIcon")}</Divider>
            <Upload
                itemRender={() => null}
                beforeUpload={(file) => {
                    handleUploadIcon(file);
                    return false
                }}
            >
                <Button type="primary" danger>{t("upload")}</Button>
            </Upload>
            {customIcons.map((item: string) => {
                return (<Radio.Button type="primary" value={item}>
                    <GlobalIcon name={item}/>
                </Radio.Button>)
            })}
        </div>)
    }, [customIcons]);

    const renderSystemIcon = useMemo(() => {
        return (<div>
            {Object.keys(iconMap).map(k => {
                return <div>
                    <Divider plain>{t(k)}</Divider>
                    {iconMap[k].map((node: string) => {
                        return (<Radio.Button type="primary" value={node}>
                            <GlobalIcon name={node}/>
                        </Radio.Button>)
                    })}
                </div>
            })}
        </div>)
    }, []);
    const renderSelectIconModal = useMemo(() => {
        return (<div className="sf_core_select_icon_modal">
            <Radio.Group value={value} buttonStyle="solid" onChange={(e) => {
                setValue(e.target.value);
            }}>
                {renderCustomIcon}
                {renderSystemIcon}
            </Radio.Group>
        </div>)
    }, [customIcons, value]);

    return (renderSelectIconModal);
};


export default React.memo(SelectIconModal);